<template>
  <div class="address">
    <div class="navbar">
      <van-nav-bar title="收货地址" left-text="返回" right-text="新增地址" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </div>

    <div class="main">

      <div class="mine" v-for="(item,index) in formData" :key="index">
        <div class="top">
          <h4>{{item.address}} &nbsp; &nbsp;</h4>
        </div>
        <div class="bottom">
          <span>{{item.name}}(先生)</span>
          <span>{{item.phone}}</span>
          <van-icon name="delete-o  " class="bi" size="25" @click="delete_pop(item)" />
          <!-- @click="delete_pop" -->
        </div>
      </div>
      <div class="show" v-show="formData == 0">
        <div>还没有收获地址去<span @click="tiaozhuan">新增一个吧</span></div>
      </div>
    </div>
  </div>
</template>

<script>
//* 删除收货地址
import { delete_address } from "../axios/api";

//* 查询收货地址
import { address_list } from "../axios/api";

//todo 编辑收货地址
// import { edit_address } from "../axios/api";

import { Toast } from 'vant';
import { Dialog } from 'vant';

export default {

  data() {
    return {
      formData: {}
    }
  },

  methods: {

    // add(item) {
    //   edit_address({ userid: userid, addressid: ).then(
    //     response => {
    //       console.log(response.data);
    //     }
    //   )
    // },

    tiaozhuan() {
      this.$router.push('/pushaddress')

    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      this.$router.push('/pushaddress')
    },

    //* 删除地址
    delete_pop(item) {
      let username = JSON.parse(localStorage.getItem('userinfo')).id

      delete_address({ userid: username, addressid: item.id }).then(
        response => {
          Dialog.confirm({
            title: '删除地址',
            message: '你确定要删除地址吗？',
          })
            .then(() => {
              Toast.clear();
              console.log(response.data);
              location.reload()
            })
            .catch(() => {
              Toast.clear();
            });
        }
      )
    }
  },

  mounted() {
    let userid = JSON.parse(localStorage.getItem('userinfo')).id
    // 连接到地址接口 自动添加地址
    address_list({ userid }).then(
      response => {
        if (response.data.code == 200) {
          Toast.clear();
          this.formData = response.data.list
          console.log(response.data);
        }
      }
    )
  },
}

</script>

<style lang='scss' scoped>
.show {
  width: 100%;
  height: 500px;
  //   background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    color: orange;
  }
}
.bi {
  position: absolute;
  right: 15px;
}
.main {
  width: 100%;
  height: 100%;

  .mine {
    width: 100%;
    height: 70px;
    // background-color: aqua;
    margin-bottom: 15px;
    margin-left: 15px;
    .top {
      width: 100%;
      height: 50%;
      //   background-color: pink;
      display: flex;
      align-items: center;
    }
    .bottom {
      width: 100%;
      height: 50%;
      //   background-color: rosybrown;
      display: flex;
      align-items: center;
      span {
        color: gray;
        margin-right: 15px;
      }
    }
  }
}
</style>